Skip to content

🤖 fix: stabilize hydration layout slots#3458

Open
ammar-agent wants to merge 1 commit into
mainfrom
hydration-74rm
Open

🤖 fix: stabilize hydration layout slots#3458
ammar-agent wants to merge 1 commit into
mainfrom
hydration-74rm

Conversation

@ammar-agent

@ammar-agent ammar-agent commented Jun 4, 2026

Copy link
Copy Markdown
Collaborator

Summary

Stabilizes hydration-time layout slots for project creation and existing chats so provider config, provider bars, and onboarding nudges do not cause visible vertical jumps while the app is loading.

Background

Existing coverage already handled streaming placeholders, bottom pinning, composer resizing, and workspace-switch tearing. A local geometry sampler reproduced the reported ProjectPage startup movement when provider configuration resolved, and follow-up audits found additional provider-branch and nudge-slot cases that could still recenter the creation stack.

Implementation

  • Co-located ConfiguredProvidersBarSkeleton with ConfiguredProvidersBar so the loading and resolved provider rows share one fixed frame.
  • Added a stable ProjectCreationProviderGate around provider-dependent ProjectPage content, with an unknown-provider skeleton that mirrors the creation composer frame and reserves the initial composer controls/textarea/footer budget.
  • Render the real AgentsInitBanner invisibly for its loading placeholder so responsive wrapping and copy changes reserve the exact final banner height.
  • Cache provider availability through useProvidersConfig, updating the cache on authoritative refreshes plus optimistic provider/model updates using provider-specific configuredness rules for custom providers, Bedrock, Mux Gateway, Ollama, and standard API-key providers.
  • Added provider-cache unit coverage and real-browser hydration geometry coverage for existing chat shell/transcript stability.

Validation

  • bun test src/browser/hooks/useProvidersConfig.test.ts src/browser/components/ProjectPage/ProjectPage.autofocus.test.tsx src/browser/components/AppLoader/AppLoader.auth.test.tsx src/browser/features/Settings/Sections/ProvidersSection.test.tsx
  • xvfb-run -a env MUX_E2E_LOAD_DIST=1 MUX_E2E_SKIP_BUILD=1 PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 bun x playwright test --project=electron tests/e2e/scenarios/hydrationLayoutStability.spec.ts
  • make static-check
  • 5 independent read-only audit sub-agents approved the final rebased diff as having no remaining layout-flash or maintainability blockers.

Risks

Moderate-low. The production changes are scoped to ProjectPage hydration slots and provider-config cache freshness, but they affect the project creation screen before the first workspace is opened. The cache remains conservative and is corrected by authoritative provider refreshes.


Generated with mux • Model: openai:gpt-5.5 • Thinking: off • Cost: $295.00

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5018ae4d95

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread tests/e2e/scenarios/hydrationLayoutStability.spec.ts Outdated
@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Addressed Codex feedback: projectRoute() in the hydration layout e2e now uses the same /project?project=<routeId> shape as navigateToProject by deriving the route id with getProjectRouteId().

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 33aecbde13

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread tests/e2e/scenarios/hydrationLayoutStability.spec.ts Outdated
@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Addressed Codex feedback: the rAF sampler now only starts its post-target frame count once the expected marker is present when a marker is provided, so the existing-chat test waits for transcript hydration instead of stopping at the empty shell.

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Swish!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed the CI unit-test mock export fixes. @codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 96317994e8

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread tests/e2e/scenarios/hydrationLayoutStability.spec.ts Outdated
@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Addressed Codex feedback: the hydration layout e2e sampler now uses Playwright-driven wall-clock sampling (page.waitForTimeout) instead of renderer requestAnimationFrame, matching the adjacent composer layout stability approach for xvfb/headless reliability.

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep them coming!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed another e2e hardening fix: project-route reloads now clear the persisted selected workspace so the new-chat startup sampler cannot briefly measure a restored workspace composer. @codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep it up!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed the CI e2e hardening: ChatInput now exposes a variant data attribute and the hydration test measures only the creation input, avoiding transient workspace composer samples in full-suite Linux runs. @codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. 🎉

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed another e2e route hardening: persisted project reloads now use the supported ?path= route so the app can resolve the exact project path without navigation state while still clearing any selected workspace. @codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 67caea1bdf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread tests/e2e/scenarios/hydrationLayoutStability.spec.ts
@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed the final Linux e2e hardening: the new-chat startup geometry assertion now runs on macOS (where project-route startup sampling is stable) while Linux still covers the existing-chat hydration path. @codex review

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Addressed Codex feedback: loadRouteForSampling() now sets the persisted route and, for http(s) dev-server runs, drives page.goto() to the target route before sampling; file-mode runs still use reload + LAST_VISITED_ROUTE_KEY.

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed the CI coverage update requested in review: the creation-card geometry regression now runs in the macOS E2E selection, while Linux continues to run the existing-chat hydration geometry path. @codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6c3319c2db

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread tests/e2e/scenarios/hydrationLayoutStability.spec.ts Outdated
@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Addressed Codex feedback: the macOS-covered creation-card test again uses the project route reload before sampling; Linux skips only that route-restoration case while still running the existing-chat hydration path.

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Can't wait for the next one!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Updated the coverage shape: the creation/new-chat provider slot now has a focused unit contract tying the loading skeleton and resolved provider row to the same frame class, and the real-browser e2e remains focused on existing-chat transcript hydration. @codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: fc06c056f2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread tests/e2e/scenarios/hydrationLayoutStability.spec.ts Outdated
@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Addressed Codex feedback by reshaping the coverage: removed the misleading placeholder assertion from the e2e and added a focused provider-row frame contract unit test for the new-chat loading/resolved slot. The e2e now covers the routed existing-chat geometry path.

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed a type-only cleanup for the AppLoader API mock used by the unit suite. @codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep it up!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Pushed the unit-suite leak fix for the provider slot test’s SettingsContext mock; affected ProvidersSection tests now pass locally too. @codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b9e4dc1324

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/browser/components/ConfiguredProvidersBar/ConfiguredProvidersBar.test.tsx Outdated
@ammar-agent

Copy link
Copy Markdown
Collaborator Author

Addressed Codex feedback: removed the tautological provider class-contract test. The provider slot fix remains in production code, and the routed chat geometry e2e remains as the maintainable real-browser regression harness.

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Swish!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

Rebased on latest main; please re-check.

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Breezy!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@ammar-agent

Copy link
Copy Markdown
Collaborator Author

@codex review

Rebased on latest main and addressed the final layout/cache audit findings; please re-check.

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Breezy!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant